<head>
    <script src="../build/index.js"></script>
</head>

<body>
    <canvas id="app" width="400" height="800"></canvas>

    <script>
        var $app = new Easycanvas.Painter();

        $app.register(document.getElementById('app'));
        $app.start();

        Easycanvas.ImgLoader('https://raw.githubusercontent.com/c-zhuo/easycanvas/master/demos/G.png', function (img) {
            // create a Sprite
            window.Sprite1 = $app.add({
                name: '1',
                content: {
                    img: img,
                },
                style: {
                    width: 50, height: 50,
                    left: 50, top: 50,
                    opacity: 0.2,
                    rotate: 10,
                    scale: Easycanvas.Transition.pendulum(1, 3, 2500).loop(),
                    locate: 'lt', // default center
                    zIndex: 1, // z-index of this image
                },
                events: {
                    eIndex: 2, // event-index of this image
                    mousemove: function (e) {
                        // "this" means this Sprite, as Sprite1
                        console.log(this, e);
                    },
                    // others: mousehold, mousedown, mouseout and touch events
                },
            });

            window.Sprite2 = $app.add({
                name: '2',
                content: {
                    img: img,
                },
                style: {
                    width: 50, height: 50,
                    left: 150, top: 50,
                    opacity: 0.2,
                    rotate: 10,
                    scale: Easycanvas.Transition.pendulum(0.5, 3, 2500).loop(),
                    locate: 'center', // default center
                    zIndex: 1, // z-index of this image
                },
                events: {
                    eIndex: 2, // event-index of this image
                    mousemove: function (e) {
                        // "this" means this Sprite, as Sprite1
                        console.log(this, e);
                    },
                    // others: mousehold, mousedown, mouseout and touch events
                },
            });

            window.Sprite3 = $app.add({
                name: '3',
                content: {
                    img: img,
                },
                style: {
                    width: 50, height: 50,
                    left: 250, top: 50,
                    opacity: 0.2,
                    rotate: 10,
                    scale: Easycanvas.Transition.pendulum(1, 3, 2500).loop(),
                    locate: 'rd', // default center
                    zIndex: 1, // z-index of this image
                },
                events: {
                    eIndex: 2, // event-index of this image
                    mousemove: function (e) {
                        // "this" means this Sprite, as Sprite1
                        console.log(this, e);
                    },
                    // others: mousehold, mousedown, mouseout and touch events
                },
            });

            window.Sprite4 = $app.add({
                name: '4',
                content: {
                    img: img,
                },
                style: {
                    width: 50, height: 50,
                    left: 50, top: 150,
                    opacity: 0.2,
                    rotate: 10,
                    scale: Easycanvas.Transition.pendulum(1, 3, 2500).loop(),
                    locate: 'lt', // default center
                    zIndex: 1, // z-index of this image
                },
                events: {
                    eIndex: 2, // event-index of this image
                    mousemove: function (e) {
                        // "this" means this Sprite, as Sprite1
                        console.log(this, e);
                    },
                    // others: mousehold, mousedown, mouseout and touch events
                },
                children: [{
                    name: '4.1',
                    content: {
                        img: img,
                    },
                    style: {
                        width: 50, height: 50,
                        left: 10, top: 10,
                        opacity: 0.2,
                        rotate: 10,
                        locate: 'lt', // default center
                        zIndex: 1, // z-index of this image
                    },
                    events: {
                        eIndex: 2, // event-index of this image
                        mousemove: function (e) {
                            // "this" means this Sprite, as Sprite1
                            console.log(this, e);
                        },
                        // others: mousehold, mousedown, mouseout and touch events
                    },
                }]
            });

            window.Sprite5 = $app.add({
                name: '5',
                content: {
                    img: img,
                },
                style: {
                    width: 50, height: 50,
                    left: 150, top: 150,
                    opacity: 0.2,
                    rotate: 10,
                    scale: Easycanvas.Transition.pendulum(1, 3, 2500).loop(),
                    locate: 'lt', // default center
                    zIndex: 1, // z-index of this image
                },
                events: {
                    eIndex: 2, // event-index of this image
                    mousemove: function (e) {
                        // "this" means this Sprite, as Sprite1
                        console.log(this, e);
                    },
                    // others: mousehold, mousedown, mouseout and touch events
                },
                children: [{
                    name: '5.1',
                    content: {
                        img: img,
                    },
                    style: {
                        width: 50, height: 50,
                        left: 10, top: 10,
                        opacity: 0.2,
                        rotate: 10,
                        scale: Easycanvas.Transition.pendulum(1, 3, 2500).loop(),
                        locate: 'center', // default center
                        zIndex: 1, // z-index of this image
                    },
                    events: {
                        eIndex: 2, // event-index of this image
                        mousemove: function (e) {
                            // "this" means this Sprite, as Sprite1
                            console.log(this, e);
                        },
                        // others: mousehold, mousedown, mouseout and touch events
                    },
                }]
            });

            window.Sprite6 = $app.add({
                name: '5',
                content: {
                    img: img,
                },
                style: {
                    width: 50, height: 50,
                    left: 250, top: 150,
                    opacity: 0.2,
                    rotate: 60,
                    locate: 'lt', // default center
                    zIndex: 1, // z-index of this image
                },
                events: {
                    eIndex: 2, // event-index of this image
                    mousemove: function (e) {
                        // "this" means this Sprite, as Sprite1
                        console.log(this, e);
                    },
                    // others: mousehold, mousedown, mouseout and touch events
                },
                children: [{
                    name: '5.1',
                    content: {
                        img: img,
                    },
                    style: {
                        left: 100, top: 100,
                        opacity: 0.2,
                        rotate: 60,
                        scale: Easycanvas.Transition.pendulum(1, 2, 2000).loop(),
                        locate: 'lt', // default center
                        zIndex: 1, // z-index of this image
                    },
                    events: {
                        eIndex: 2, // event-index of this image
                        mousemove: function (e) {
                            // "this" means this Sprite, as Sprite1
                            console.log(this, e);
                        },
                        // others: mousehold, mousedown, mouseout and touch events
                    },
                }]
            });
        });
    </script>
</body>

